AS3でグラフィカルプログラミング#１

#ActionScript

#RIA

石上慎太郎

2011.07.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ActionScript3.0で図形を描画するための方法について解説していきます。

この記事の対象：FlashまたはFlexに触れたことがある方。
必要な開発環境：Flash、FlashBuilder、FlashDevelop等のActionScript3.0の記述と実行ができる環境。

Graphicsクラス

Graphicクラスは、図形の描画をするためのクラスです。Graphicsクラスのインスタンスには、ShapeとSpriteが持つgraphicsプロパティからアクセスできます。Graphicsクラスのインスタンスを直接newして作成することはできません。ShapeとSpriteではShapeの方が軽量ですが、ShapeはDisplayObjectContainerを継承していないため子表示オブジェクトを持てず、マウス等のユーザー入力のイベントがサポートされません。用途によって使い分けましょう。

ベクターシェイプの概念

Graphicsクラスで描画される図形は、ビットマップ画像ではなく線と塗りの情報で構成されているベクター図形です。線の情報と塗りの情報を定義してから図形を描く流れが基本となります。線のみ、または塗りのみの図形を描画することもできます。また、ビットマップ画像を塗りとして使用することもできます。

とりあえず描いてみる

まずは、直線と円と矩形を描いてみましょう。線を描く手順は、以下の通りです。

lineStyleで線のスタイルを設定します。
moveToで線の開始位置へ移動します。
lineToで線を描きます。

円を描く手順は以下の通りです。

lineStyleで線のスタイルを設定します。
beginFillで塗りを設定します。
drawCircleで中心点と半径を指定して円を描きます。
endFillで塗りを終わります。

矩形を描く手順は以下の通りです。

lineStyleで線のスタイルを設定すします。
beginFillで塗りを設定します。
drawRectで左上の座標と幅・高さを指定して矩形を描きます。
endFillで塗りを終わります。

//描画用のShapeを作成します。
var shape:Shape = new Shape();
addChild(shape);
var g:Graphics = shape.graphics;

//線のスタイルを太さ4pxの赤に設定します。
g.lineStyle(4, 0xFF0000);
//x=50px,y=50px地点に移動します。
g.moveTo(50, 50);
//x=200px,y=200px地点まで線を描画します。
g.lineTo(200, 200);
//続けて、x=200px,y=150px地点まで線を描画します。
g.lineTo(200, 150);
//続けて、x=250px,y=200px地点まで線を描画します。
g.lineTo(250, 200);

//線のスタイルを太さ2pxの緑に設定します。
g.lineStyle(2, 0x00FF00);
//青の塗りを開始します。
g.beginFill(0x0000FF);
//x=100px,y=200px地点を中心に半径50pxの円を描画します。
g.drawCircle(100, 200, 50);
//塗りを終了します。
g.endFill();

//線無しに設定します。
g.lineStyle(undefined);
//不透明度30%の黒の塗りを開始します。
g.beginFill(0x000000, 0.3);
//x=150px,y=50px地点から幅50px,高さ50pxの矩形を描画します。
g.drawRect(150, 50, 50, 50);
//塗りを終了します。
g.endFill();

実行結果

他にも、以下のような描画メソッドがよく使われます。

drawRoundRect：角丸の矩形を描画します。
drawEllipse：楕円を描画します。
curveTo：一次ベジェ曲線を描画します。

解説

lineStyleについて

Graphicsクラスのインスタンス内では、lineStyleを実行して線の設定を行わない限り、図形に線が描画される事はありません。一度lineStyleで線のスタイルを設定すると、再度線のスタイル設定を行うまで、その設定が有効となります。また、lineStyleの第一引数thicknessは線の太さを示しますが、0を指定すると、極細線という特殊な線が描けます。極細線は、どんなスケールで表示しても1ピクセルの太さで表示されます。例えば、1ピクセルの太さで描画した線はスケールを10に設定すると太さ10ピクセルで表示されますが、極細線の太さはスケールを変えても常に1ピクセルになります。一度線を描画した後、以降の描画で線を描画しないようにしたい場合は、lineStyleのthicknessにundefinedを設定すると、線の描画を無効にできます。

thickness = 1 と thickness = 0の比較

beginFillについて

beginFillを実行すると、指定した色で塗りを開始しますが、このメソッド自体が直接図形を描画するわけではありません。beginFillは、その後に実行されるdrawRect等の描画メソッドに対しての塗りを設定します。この設定は、endFillを実行するか、再度別の塗りを開始するまで有効です。同じ塗りで重なりあった図形を描画すると、重なりあった領域が切り取られます。

//描画用のShapeを作成します。
var shape:Shape = new Shape();
addChild(shape);
var g:Graphics = shape.graphics;

//重なりあった角丸矩形と円を同じ塗りで描画します。
g.beginFill(0x000000);
g.drawRoundRect(0, 0, 100, 100, 10, 10);
g.drawCircle(100, 100, 50);
g.endFill();

実行結果

また、塗り無しで線を描くと指定した通りの線のみが描画されますが、beginFillで塗りを開始した後に線を描画すると、連続している一連の線の始点と終点を結んだ線が自動的に描画され、その内側が塗られます。

//描画用のShapeを作成します。
var shape:Shape = new Shape();
addChild(shape);
var g:Graphics = shape.graphics;

//塗り無しでベジェ曲線を描画します。
g.lineStyle(2, 0x000000);
g.moveTo(50, 50);
g.curveTo(200, 50, 100, 100);
g.curveTo(0, 150, 150, 150);

//新たに描画用のShapeを作成します。
shape = new Shape();
addChild(shape);
shape.y = 150;
g = shape.graphics;

//塗り有りで同じベジェ曲線を描画します。
g.lineStyle(2, 0x000000);
g.beginFill(0xcccccc);
g.moveTo(50, 50);
g.curveTo(200, 50, 100, 100);
g.curveTo(0, 150, 150, 150);
g.endFill();

実行結果